<template>
  <div class="person-info-container">
    <card-container height="628px"  key="container3"  style="margin-top: 16px;" title="用户信息">
      <div class="person-content">
        <div class="header-avatar-box">
          <span>头像：</span>
          <div class="img-box">
            <img :src="userAvatar || ''" alt="">
          </div>
        </div>
        <div>
          <p><span>昵称：</span>{{nickName ? nickName : '暂无'}}</p>
        </div>
        <div>
          <p><span>性别：</span>{{genderInfo}}</p>
        </div>
        <div>
          <p><span>生日：</span>{{birthday}}</p>
        </div>
        <div>
          <p><span>签名：</span>{{signature ? signature : '暂无'}}</p>
        </div>
        <div>
          <p><span>微信：</span>{{wxNumber ? wxNumber : '暂无'}}</p>
        </div>
        <div>
          <p><span>QQ号：</span>{{qqNumber ? qqNumber : '暂无'}}</p>
        </div>
        <div>
          <p><span>手机号：</span>{{mobile ? mobile : '暂无'}}</p>
        </div>
      </div>
    </card-container>
  </div>
</template>


<script>
  import ProjectCard from '../../../components/pc/projectCard';
  import CardContainer from '../../../components/pc/cardContainer';
  import config from '../../../action/config';
  import Pagination from "../../../components/pc/pagination";
  import EmptyCard from "../../../components/pc/emptyCard";

  export default {
    name:'info',
    components:{
      ProjectCard,CardContainer,Pagination,EmptyCard
    },
    async asyncData({$axios}) {
      let infoResponse = await $axios.$get(config.api.get.User.myInfo);
      return { ...infoResponse.data }
    },
    computed: {
      genderInfo: function () {
        if (this.gender === 0) {
          return '保密'
        } else if (this.gender === 1) {
          return '男'
        } else if (this.gender === 2){
          return '女'
        }

      }
    }

  }
</script>

<style lang="scss" scoped>
  .person-info-container{
    .person-content{
      padding-top: 40*$length;
      padding-left: 154*$length;
      > div {
        margin-bottom: 27*$length;
        @extend %flex-row-spb;
        justify-content: flex-start;
        p {
          @include fontStyle(14,19,500,#333,left);
        }
      }
      span {
        display: inline-block;
        width: 56*$length;
        margin-right: 16*$length;
        @extend %cursorPointer;
        @include fontStyle(14,19,500,#999,right);
      }
      .header-avatar-box{
        .img-box{
          width: 90*$length;
          height: 90*$length;
          background-color: #F4F8FA;
          @include border-radius(50%);
          > img {
            width: 90*$length;
            height: 90*$length;
            object-fit: contain;
            @include border-radius(50%);
          }
        }
      }

    }
  }
</style>
